<template>
	<view class="login">
		<image class="login-bg" src="https://daiyue.gzzhenyi.net/static/image/login/bg.png" mode="heightFix" />
		<view class="login-header">
			<van-icon name="arrow-left" color="#333333" @tap="toBar" />
			<view class="login-header-title">验证手机号</view>
		</view>
		<view class="login-logo">
			<image src="https://daiyue.gzzhenyi.net/static/image/login/logo.png" mode="widthFix" />
		</view>
		<view class="login-btn">
			<!-- <input class="input-phone" v-model="phone" placeholder="请输入手机号码" placeholder-class="input-placeholder"
				@input="" /> -->
			<view class="mobile">{{ user.mobile }}</view>
			
			<!-- <view>
				<input class="input-phone" v-model="phone" placeholder="请输入验证码" placeholder-class="input-placeholder"
					@input="" />
				<button class="login-btn-top" @click="send">
					发送验证码
				</button>
			</view> -->

			<button class="login-btn-top" @click="verification">
				立即验证
			</button>

			<view class="login-btn-line">
				<radio :value="isShow" color="#359BEF" style="transform:scale(0.7)" :checked="isShow"
					@click="isShow = !isShow" />
				<span class="login-btn-line-text" @click="isShow = !isShow">我已阅读即时为同意</span>
				<span class="login-btn-line-a">《孕动伊栈会员-用户协议》</span>
			</view>
		</view>
	</view>

</template>
<script>
	import {
		sendCode
	} from '@/api/api.js'
	import {
		mapState,
		mapMutations
	} from 'vuex'
	export default {
		data() {
			return {
				phone: '',
				isShow: false
			}
		},
		computed: {
			...mapState(['user'])
		},
		methods: {
			send(e){
				sendCode({
					mobile: this.user.mobile
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '发送成功',
							icon: 'none'
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			verification(e) {
				let erg = /^(?:(?:\+|00)86)?1[3-9]\d{9}$/
				if (!this.isShow) {
					uni.showToast({
						title: '请同意用户协议',
						icon: 'none'
					})
					return
				}
				
				sendCode({
					mobile: this.user.mobile,
					event: "verify"
				}).then(res => {
					if (res.code == 1) {
						uni.showToast({
							title: '发送成功',
							icon: 'none'
						})
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/login/resend?phone=' + this.phone
							})
						}, 500)
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
				
				/* if (!erg.test(this.phone)) {
					uni.showToast({
						title: '请输入正确的手机号',
						icon: 'none'
					})
				} else {
					sendCode({
						mobile: this.phone,
						event: "verify"
					}).then(res => {
						if (res.code == 1) {
							uni.showToast({
								title: '发送成功',
								icon: 'none'
							})
							setTimeout(() => {
								uni.navigateTo({
									url: '/pages/login/resend?phone=' + this.phone
								})
							}, 500)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					})
				} */

			},
			toBar() {
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {


		.login-bg {
			width: 100%;
			height: 1624upx;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
		}

		.login-header {
			position: absolute;
			top: 105upx;
			left: 48%;
			transform: translateX(-50%);
			display: flex;
			width: 90%;

			.login-header-title {
				font-size: 30upx;
				color: #333333;
				display: flex;
				justify-content: center;
				margin: 0 auto;
			}
		}

		.login-logo {
			position: absolute;
			top: 20%;
			left: 50%;
			transform: translate(-50%, -50%);

			image {
				width: 350upx;
			}
		}

		.login-btn {
			position: absolute;
			top: 40%;
			left: 50%;
			transform: translate(-50%, -50%);
			
			.mobile{
				text-align: center;
				font-size: 52rpx;
				margin-bottom: 20rpx;
			}

			.input-phone {
				background-color: #EAEAEA;
				border: 1px solid #359BEF;
				border-radius: 50px;
				padding: 30upx 40upx;
				margin-bottom: 40upx;
			}

			.input-placeholde {
				color: #878787;
				font-size: 30upx;
			}

			.login-btn-top {
				width: 600upx;
				height: 100upx;
				border-radius: 50px;
				opacity: 1;
				background: linear-gradient(270deg, #6A91F6 0%, #009CF8 31%, #2AD9FC 100%);
				color: #fff;
				font-size: 30upx;
				text-align: center;
				line-height: 100upx;
				margin-bottom: 30upx;
			}

			.login-btn-line {
				margin-top: 30upx;
				display: flex;
				align-items: center;

				.login-btn-line-text {
					color: #37363D;
					font-size: 22upx;
					font-weight: normal;
					// margin: 0 10upx;
					margin-right: 10upx;
				}

				.login-btn-line-a {
					color: #EBB234;
					font-size: 22upx;
					font-weight: normal;
				}
			}
		}
	}
</style>